<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="120">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="企业名称">
            <el-input v-model="searchForm.productName" placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称">
            <el-input v-model="searchForm.productName" placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行政区划市">
            <el-select v-model="searchForm.categoryId">
              <!-- <el-option
                v-for="item in serviceTypeList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              ></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区县/管辖机构">
            <el-select v-model="searchForm.categoryId">
              <!-- <el-option
                v-for="item in serviceTypeList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              ></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增设备</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="enterPise" label="企业名称" width="180" align="center">
        <template #default="{ row }">
          <div>{{ row.repair.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center" />
      <el-table-column prop="deviceNo" label="设备编号" align="center" />
      <el-table-column prop="purpose" label="用途" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="你确定要删除该设备?" width="180" @confirm="handleDelete(row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceNo">
          <el-input v-model="form.deviceNo" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="类型" prop="deviceType">
          <el-input v-model="form.deviceType" placeholder="请输入类型" />
        </el-form-item>
        <el-form-item label="用途" prop="purpose">
          <el-input v-model="form.purpose" placeholder="请输入用途" />
        </el-form-item>
        <el-form-item label="型号" prop="type">
          <el-input v-model="form.type" placeholder="请输入型号" />
        </el-form-item>
        <el-form-item label="计量检定证书号" prop="metrologicalVerificationCertificateNo">
          <el-input
            v-model="form.metrologicalVerificationCertificateNo"
            placeholder="请输入计量检定证书号"
          />
        </el-form-item>
        <el-form-item label="证书有效期" prop="validityPeriodTime">
          <el-date-picker
            v-model="form.validityPeriodTime"
            type="date"
            placeholder="请选择证书有效期"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="生产日期" prop="productTime">
          <el-date-picker
            v-model="form.productTime"
            type="date"
            placeholder="请选择生产日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="保修期" prop="enterPise">
          <el-input v-model="form.enterPise" placeholder="请输入保修期" />
        </el-form-item>
      </el-form>
      <div class="ml-[200px] text-red-500">M站必填机动车尾气 (柴油汽油) 诊断设备</div>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import {
  getEnterpriseDevicePageApi,
  addEnteriseDeviceApi,
  editEnteriseDeviceApi,
  deleteEnteriseDeviceApi
} from "@/api/maintain";
import FormDrawer from "@/components/FormDrawer.vue";

const {
  tableData,
  searchForm,
  currentPage,
  limit,
  total,
  handleRestSearch,
  handleGetTableList,
  handleDelete
} = useInitTable({
  searchForm: {
    name: "",
    enterpriseName: "",
    carNumber: ""
  },
  getTableList: getEnterpriseDevicePageApi,
  deleteData: deleteEnteriseDeviceApi
});

const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      deviceName: "",
      deviceNo: "",
      deviceType: "",
      purpose: "",
      type: "",
      metrologicalVerificationCertificateNo: "",
      validityPeriodTime: "",
      productTime: ""
    },
    rules: {
      deviceName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
      deviceNo: [{ required: true, message: "请输入设备编号", trigger: "blur" }],
      deviceType: [{ required: true, message: "请输入类型", trigger: "blur" }],
      purpose: [{ required: true, message: "请输入用途", trigger: "blur" }]
    },
    createData: addEnteriseDeviceApi,
    updateData: editEnteriseDeviceApi,
    success: () => {
      handleGetTableList();
    }
  }
);
</script>
<style scoped lang="scss"></style>
